<template>
  <div class="top-header">
    <div>
      <img src="@/assets/logo2.png" width="35" height="35" />
      <span class="logo">魅我后台管理系统</span>
    </div>
    <div>
      <span class="nickname">{{ globaltore.userInfo.nickname }}</span>
      <span>
        <el-avatar shape="square" :size="30" :src="globaltore.userInfo.avatar" />
      </span>
      <span class="logout" @click="logout()">退出登录</span>
    </div>
  </div>

  <div class=""></div>
</template>

<script setup lang="ts">
import useGlobalStore from '../../store/modules/global';
import {ref,onMounted } from 'vue'
import {useRouter} from 'vue-router'

const globaltore = useGlobalStore()
const router = useRouter()

const avatar = ref('http://img.duoziwang.com/2019/06/09221645716916.jpg')

const logout = () =>{
  router.push('/login')
  globaltore.clearUserInfo()
  globaltore.clearToken()
}
onMounted(() => {
  try{
    const blob = new Blob([globaltore.userInfo.avatar],{type:'image/png'})
    avatar.value = URL.createObjectURL(blob)
  }catch(err){
    console.log(err)
  }
})
</script>

<style lang="less" scoped>
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px;
  background-color: #6383ff;
  > div {
    display: flex;
    align-items: center;
    img {
      vertical-align: middle;
      border-radius: 4px;
      margin-right: 10px;
    }
    
    .logo {
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
    }
    
    .nickname {
      margin:0 10px;
      color: #ffffff;
      font-size: 14px;
    }
    .logout{
      font-size:12px;
      color:#ffffff;
      cursor:pointer;
      margin-left:10px;
    }
    .logout:hover{
      color:red;
    }
  }
}
</style>
